{% macro component(config) %}
    {# Set a default name by using the id. #}
    {% set name = config.id %}
    {% if config.name is not empty %}
        {% set name = config.name %}
    {% endif %}

    {% embed "system/embed/form-row.html.twig" %}
        {% import "system/macro/form-component/info-hint.html.twig" as hint %}
        {% import "system/macro/form-component/checkbox.html.twig" as checkbox %}
        {% block label %}
            <div id="{{ config.id }}-parent" class="bc-flex bc-items-center">
                <span>{{ config.title | raw }}</span>
                {# Displays the hint icon. #}
                {% if config.hint is not empty %}
                    <div class="bc-inline-block bc-pl-1">
                        {{ hint.component({
                            hint: config.hint,
                            position: config.hintPopupPosition
                        }) }}
                    </div>
                {% endif %}
            </div>
        {% endblock %}
        {% block input %}
            {% if config.checkboxes is not empty %}
                {% for checkboxConfig in config.checkboxes %}
                    <div class="bc-flex bc-h-5 bc-items-center bc-space-x-1 bc-my-1">
                        {{ checkbox.component({
                            checked: checkboxConfig.key in config.checkedKeys | keys,
                            dataAttribute: "data-brlbs-checkbox-list-key=\"#{checkboxConfig.key}\" #{config.dataAttribute}",
                            id: config.id ~ '-' ~ checkboxConfig.key,
                            name: name ~ '[' ~ checkboxConfig.key ~ ']'
                        }) }}
                        <label class="bc-text-gray-700 bc-mr-2 bc-pb-1"
                               for="{{ config.id }}-{{ checkboxConfig.key }}">{{ checkboxConfig.value }}
                            <em>({{ checkboxConfig.key }})</em>
                        </label>
                    </div>
                {% endfor %}
            {% endif %}
        {% endblock %}
    {% endembed %}
{% endmacro %}
